<template>
	<el-dialog :title="title" v-model="open" append-to-body :close-on-click-modal="false" width="500px">
		<el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
			<el-row :gutter="10" class="mb20">
				<el-col :span="24">
					<el-form-item label="供应商名称" prop="title">
						<el-input v-model="form.title" placeholder="请输入名称" />
					</el-form-item>
				</el-col>
				<!-- <el-col :span="12">
					<el-form-item label="供应商状态" prop="status">
						<el-radio-group v-model="form.status">
							<el-radio :label="1">启用</el-radio>
							<el-radio :label="0">禁用</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col> -->
			</el-row>
			<el-row :gutter="10" class="mb20">
				<el-col :span="24">
					<el-form-item label="负责人" prop="name1">
						<el-input v-model="form.name1" placeholder="请输入负责人" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10" class="mb20">
				<el-col :span="24">
					<el-form-item label="负责人联系方式" prop="mobile1">
						<el-input v-model="form.mobile1" placeholder="请输入负责人联系方式" />
					</el-form-item>
				</el-col>
			</el-row>
			<!-- <el-row :gutter="10" class="mb20">
				<el-col :span="12">
					<el-form-item label="邮箱" prop="email">
						<el-input v-model="form.email" placeholder="请输入邮箱" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="支持发货和导单" prop="derivation">
						<el-select v-model="form.derivation" placeholder="请选择是否支持导单" style="width: 100%">
							<el-option label="支持" :value="1" />
							<el-option label="不支持" :value="2" />
						</el-select>
					</el-form-item>
				</el-col>
			</el-row> -->
			<el-row :gutter="10" class="mb20">
				<el-col>
					<el-form-item label="详细地址" prop="area">
						<el-cascader v-model="form.area" :props="addressProps" placeholder="请选择省市区" class="w100" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row class="mb20">
				<el-col>
					<el-form-item prop="address">
						<el-input v-model="form.address" :rows="3" type="textarea" placeholder="请输入详细地址" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10" class="mb20">
				<el-col :span="24">
					<el-form-item label="超管账号" prop="username">
						<el-input v-model="form.username" placeholder="请输入账号" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10">
				<el-col :span="24">
					<el-form-item label="超管密码" prop="password">
						<el-input v-model="form.password" placeholder="请输入密码" />
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button type="primary" :loading="submitLoading" @click="onSubmitForm"> 确 定 </el-button>
				<el-button @click="onCancel">取 消</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script lang="ts">
import { reactive, ref, toRefs } from 'vue';
import { ElMessage } from 'element-plus';
import { getAreaList, supplierAdd } from '/@/api/admin';
import { isChinese } from '/@/utils/toolsValidate';
export default {
	name: 'supplierAddDialog',
	setup() {
		const validatePhone = (rule: any, value: any, callback: any) => {
			if (value.length < 11) {
				callback(new Error('请输入11位以上的联系方式'));
			} else {
				callback();
			}
		};
		const validateChinese = (rule: any, value: any, callback: any) => {
			if (!isChinese(value)) {
				callback(new Error('超管账号不能是中文'));
			} else {
				callback();
			}
		};
		const validateLength = (rule: any, value: any, callback: any) => {
			if (value.length < 5 || value.length > 20) {
				callback(new Error('请输入5-20位的密码长度'));
			} else {
				callback();
			}
		};
		let callback: Function = () => {};
		const formRef = ref(null);
		const state = reactive({
			title: '添加供应商',
			open: false,
			form: {} as any,
			rules: {
				title: [{ required: true, message: '供应商名称不能为空', trigger: 'blur' }],
				name1: [{ required: true, message: '负责人不能为空', trigger: 'blur' }],
				mobile1: [
					{ required: true, message: '负责人联系方式不能为空', trigger: 'blur' },
					{ required: true, validator: validatePhone, trigger: 'blur' },
				],
				area: [{ required: true, message: '省市区不能为空', trigger: ['blur', 'change'] }],
				address: [{ required: true, message: '详细地址不能为空', trigger: 'blur' }],
				username: [
					{ required: true, message: '超管账号不能为空', trigger: 'blur' },
					{ required: true, validator: validateChinese, trigger: 'blur' },
				],
				password: [
					{ required: true, message: '超管密码不能为空', trigger: 'blur' },
					{ required: true, validator: validateLength, trigger: 'blur' },
				],
			}, // 表单校验
			submitLoading: false,
			provinceOptions: [], //省
			cityOptions: [], //市
			countyOptions: [],
			addressProps: {
				checkStrictly: true,
				lazy: true,
				lazyLoad(node: any, resolve: any) {
					const {
						data: { id },
						level,
					} = node;
					_getAreaList({ id: level ? id : 100000 }, level, resolve);
				},
				value: 'name',
				label: 'name',
			},
		});

		/********** 点击事件(on开头) **********/
		/** 提交按钮 */
		const onSubmitForm = () => {
			(formRef.value as any)?.validate((valid: boolean) => {
				if (valid) {
					// console.log(state.form.area, state.form.area[0], state.form.area[1]);
					state.submitLoading = true;
					_supplierAdd({
						...state.form,
						email: state.form.mobile1 + '@qq.com',
						derivation: 1,
						province: state.form.area[0],
						city: state.form.area[1],
						county: state.form.area[2],
					});
				}
			});
		};
		// 取消按钮
		const onCancel = () => {
			state.submitLoading = false;
			state.open = false;
			reset();
		};

		/********** 方法事件 **********/
		//打开
		const openDialog = (config: any, fn: Function) => {
			console.log(config);
			callback = fn;
			state.open = true;
			reset();
		};
		// 表单重置
		const reset = () => {
			state.form = {
				title: '',
				status: 1,
				name1: '',
				mobile1: '',
				email: '',
				province: '',
				city: '',
				county: '',
				address: '',
				derivation: 1,
				username: '',
				password: '',
				area: [],
			};
			(formRef.value as any)?.resetFields();
		};

		/********** 网络事件 **********/
		// 选择省市区
		const _getAreaList = (_data: object, _level: number, resolve: any) => {
			getAreaList(_data).then((res: any) => {
				console.log('选择省市区', res);
				let nodes = res.data.list.map((item: any) => ({
					id: item.id,
					name: item.name,
					leaf: _level >= 2,
				}));
				resolve(nodes);
			});
		};

		//添加供应商
		const _supplierAdd = (params: any) => {
			supplierAdd(params)
				.then((res: any) => {
					console.log(res);
					ElMessage.success('操作成功');
					onCancel();
					callback();
				})
				.catch(() => (state.submitLoading = false));
		};
		return {
			formRef,
			onSubmitForm,
			openDialog,
			onCancel,
			...toRefs(state),
		};
	},
};
</script>

<style lang="scss" scoped></style>
